<template>
    <el-card>
        <!-- 搜索 -->
        <Search :model="searchForm" @search="getData" @reset="resetSearchForm">
           <SearchItem label="選擇">
            <el-select v-model="searchForm.keyword" placeholder="請選擇排序" clearable>
              <el-option v-for="item in tabs" :key="item.key" :label="item.name" :value="item.key"/>
            </el-select>
           </SearchItem>

           <SearchItem label="选择時間">
            <el-date-picker
                v-model="searchForm.time"
                type="daterange"
                range-separator="至"
                start-placeholder="開始時間"
                end-placeholder="結束時間"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
          </SearchItem>
       </Search>
   
       <!-- 新增|刷新 -->
       <ListHeader  @refresh="getData" layout="refresh,download" @download="handleExportExcel" />
   
       <el-table :data="tableData"  v-loading="loading">
        <el-table-column label="序號">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="產品名"  />
         <el-table-column label="產品圖">
        <template #default="{ row }">
        
          <el-image style="width: 100px; height: 50px" :src="row.banners.toString().split(',')[0]" hide-on-click-modal
            :preview-src-list="[row.banners.toString().split(',')[0]]" :preview-teleported="true" />
        </template>
      </el-table-column>
 
      <el-table-column prop="price" label="價格"  />
      <el-table-column prop="num" label="庫存"  />
      <el-table-column prop="browse" label="瀏覽量"  />
      <el-table-column prop="sales" label="銷售量"  />
      <el-table-column prop="collect" label="收藏量"  />
      <el-table-column prop="sale_money" label="銷售額"  />
    
         <el-table-column prop="created_at" label="創建時間"  />
    
         <!-- <el-table-column label="操作" width="180" align="center">
           <template #default="scope">
             
   
             <el-popconfirm title="是否要删除？" confirmButtonText="確認" cancelButtonText="取消" @confirm="handleDelete(scope.row.id)">
                   <template #reference>
                       <el-button type="danger" size="small">删除</el-button>
                   </template>
               </el-popconfirm>
            
           </template>
         </el-table-column> -->
         
       </el-table>
   
       <div class="flex items-center justify-center mt-5">
           <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage" :page-size="limit" @current-change="getData"/>
       </div>
   
    </el-card>
   </template>
   
    <script setup>
   import ListHeader from "@/components/ListHeader.vue";
   import Search from "@/components/Search.vue";
   import SearchItem from "@/components/SearchItem.vue";
   import { useInitTable } from '@/composables/useCommon.js'
   import {getsale,delsale,getexcel} from "@/api/product.js"
  
   const {
     searchForm,
     resetSearchForm,
     tableData,
     loading,
     currentPage,
     total,
     limit,
     getData,
     handleDelete
   } = useInitTable({
     searchForm:{
       keyword:"",
       time:''
     },
     getList:getsale,
     delete:delsale,
   })
   

 const tabs=[{key:1,name:"最高銷量"},{key:2,name:"最低銷量"},{key:3,name:"最高瀏覽量"},{key:4,name:"最低瀏覽量"}]  

 const handleExportExcel=()=>{
  getexcel().then(res=>{
    console.log(res)
    // window.open(res, '_blank', 'noopener,noreferrer');

    const a = document.createElement('a');
    a.href = res;
    a.download = 'filename.xlsx';
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  })
 }
   </script>
   
   